<script setup lang="ts">

// 任何其他使用 useState('counter') 的组件都会共享相同的响应式状态
// 这是因为 useState 是全局的，并且通过键来管理状态
const counter = useState('counter', () => Math.round(Math.random() * 1000))

const websiteConfig = useState<{ name: string, description: string }>('config')

await callOnce(async() => {
  websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
})
</script>

<template>
  <div>
    计数器：{{ counter }}
    <UButton @click="counter++">+</UButton>
    <UButton @click="counter--">-</UButton>
    <div>
      <h1>网站配置</h1>
      <p>网站名称：{{ websiteConfig.name }}</p>
      <p>网站描述：{{ websiteConfig.description }}</p>
    </div>
  </div>
</template>
